import React from 'react';
import { Carousel } from 'antd';
import styles from './banner.less';
import { history } from 'umi';
// import { goPlayList, goAlbum } from '../../../assets/js/linkto';
import { getBanner } from '../../../../api/discover';

class Banner extends React.Component {
  state = {
    activeIndex: 0,
    banners: [],
  };
  next = () => {
    this.refs.banner.next();
  };
  prov = () => {
    this.refs.banner.prev();
  };
  beforeChange = (from, to) => {
    this.setState({
      activeIndex: to,
    });
  };
  componentDidMount() {
    getBanner().then((res) => {
      this.setState({ banners: res.banners });
      console.log(res.banners);
    });
  }
  render() {
    let { banners } = this.state;

    let bannerList = banners.map((item, index) => (
      <div key={index}>
        <a href="">
          <img src={item.imageUrl} alt="轮播图篇" />
        </a>
      </div>
    ));
    let bgStr = banners[this.state.activeIndex]
      ? banners[this.state.activeIndex].imageUrl
      : '';
    let boxStyle = {
      backgroundImage: `url(${bgStr})`,
    };

    return (
      <div className={styles['banner-warp']}>
        <div style={boxStyle} className={`${styles['bannerBg']} fill`}></div>
        <div className={styles['main-banner'] + ' content-box'}>
          <div
            className={`${styles['next-item']} iconfont icon-you click`}
            onClick={this.prov}
          ></div>
          <div
            className={`${styles['next-item']} iconfont icon-you click ${styles['prov']}`}
            onClick={this.next}
          ></div>
          <Carousel autoplay ref="banner" beforeChange={this.beforeChange}>
            {bannerList}
          </Carousel>
        </div>
      </div>
    );
  }
}

export default Banner;
